import React, { useContext } from 'react';
import LoginForm from './form';

import bg from '@/assets/login-bg.png';
import secure from '@/assets/login-secure.png';
import logo from '@/assets/login-logo.png';

import styles from './style/index.module.less';
import Header from './header';
import cs from 'classnames';
import { GlobalContext } from '@/context';
import locale from './locale';
import useLocale from '@/utils/useLocale';

function Login() {
  const { rtl } = useContext(GlobalContext);
  const t = useLocale(locale);
  return (
    <div className={cs(styles.page, rtl ? 'rtl' : '')}>
      <Header />
      <img src={bg} className={styles['page-img']} />
      <div className={styles['container']}>
        <div className={styles['width']}>
          <div className={styles['desc']}>
            <img src={secure} className={styles['container-secure']} />
            <div className={styles['desc-info']}>
              <img src={logo} className={styles['desc-info-logo']} />
              <div className={styles['desc-info-text']}>{t['login-desc']}</div>
            </div>
          </div>
          <div className={styles['form']}>
            <LoginForm />
          </div>
        </div>
      </div>
    </div>
  );
}
Login.displayName = 'LoginPage';

export default Login;
